/**
 * 饼状图、环状图
 * circleChartsC (reactCharts)
 * @author zxy
 * @date  2020-05-26
 */
import React from 'react';
import { FirstHeaderC, CircleChartsC, SecondHeaderC } from '../../comps';
import { Row, Col } from 'antd';

class DemoLineChartsC extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { name: '债券', value: 0.0491, key: 'ratio_bond' },
        { name: '现金', value: 0.018, key: 'ratio_cash' },
        { name: '费用', value: 0.0017, key: 'ratio_fee' },
        { name: '期货期权', value: 0.0, key: 'ratio_futures' },
        { name: '其他资产', value: 0.0, key: 'ratio_other-asset' },
        { name: '股票', value: 0.9298, key: 'ratio_stock' },
        { name: '回购', value: 0.0076, key: 'ratio_buyback' },
      ],
      data1: undefined,
    };

    setTimeout(() => {
      this.setState({
        data1: [
          { value: 100, name: '语文' },
          { value: 100, name: '数学' },
          { value: 100, name: '英语' },
        ],
      });
    }, 5000);
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='echarts图' />
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='饼状图' />
            <CircleChartsC data={this.state.data} height={300} showLable={true} showLegend={false} type='ring' radius={['40', '60']} startAngle={0} showBorder={false} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='无数据' />
            <CircleChartsC data={[]} height={300} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='环形图' />
            <CircleChartsC
              data={[
                { value: -100, name: '语文' },
                { value: 100, name: '数学' },
                { value: 100, name: '英语' },
              ]}
              height={300}
              type='ring'
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='异步加载环形图' />
            <CircleChartsC data={this.state.data1} height={300} type='ring' unit='万元' text='1000亿' subText='组合分析' legendX='70%' legendFormat='2' />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='饼状图' />
            <CircleChartsC
              data={[
                { value: 50840.0, name: '城投债' },
                { value: 24745394.95, name: '利率债' },
              ]}
              height={200}
              showLable={true}
              showLegend={false}
              type='pie'
              lableFormatter={'type2'}
              // radius={'50%'}
              // startAngle={0}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='多环' />
            <CircleChartsC
              data={[
                [
                  { value: 55, name: '负收益期数', label: { show: false }, labelLine: { show: false } },
                  { value: 45, name: '基金正收益期数', labelLine: { length2: 100 } },
                ],
                [
                  { value: 45, name: '负收益期数', label: { show: false }, labelLine: { show: false } },
                  { value: 55, name: '基准正收益期数', labelLine: { length2: 80 } },
                ],
                [
                  { value: 45, name: '负收益期数', label: { show: false }, labelLine: { show: false } },
                  { value: 55, name: '同类型基金指数正收益期数', labelLine: { length2: 60 } },
                ],
              ]}
              height={300}
              showLable={true}
              showLegend={true}
              type='ring'
              legend={['基金正收益期数', '基准正收益期数', '同类型基金指数正收益期数', '负收益期数']}
              lableFormatter={'type3'}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default DemoLineChartsC;
